<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="description" content="Visualize the distribution of averaged signal strength measurements on a heat map">
    <title>Visualize the Distribution of Mobile Network Signal Strengths on a Heat Map</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
		<link rel="stylesheet" type="text/css" href="css/example.css" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
		<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
		<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
		<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
		<script type="text/javascript" src="https://d3js.org/d3.v4.0.0-alpha.50.min.js"></script>
		<script type="text/javascript" src="https://js.datalens.api.here.com/2.0.0/mapsjs-datalens.js"></script>
  </head>
  <body>
    <h1>Visualize the Distribution of Mobile Network Signal Strengths on a Heat Map</h1>
    <p><div>This example displays a visualization of mobile network signal strength on a map. We introduce the concept of the Data Lens REST API query which is used to fetch and process the data, and then demonstrate how the Data Lens JavaScript libraries are used to produce the visualization.</div><div><br></div><div>The dataset used for the visualization represents a set of geographical points and signal strength measurements taken at each point. (Note that the actual data used here is simulated.) We first aggregate the data points per pixel and, where multiple points are represented on one pixel, we average the points' signal strength measurements. Then, we fetch this data from the Data Lens cloud, and we create a heat map that plots an interpolation of signal strength on the map. We use color-coding to indicate the average signal strengths, and opacity to indicate the confidence in these interpolated averages.<br></div><div><br></div><div>A heat map is a visualization style used to identify discernible geographic clusters and hotspots. It is often used to visually identify patterns in large datasets. Heat maps allow smoothing for interpolation of values, which may include weighted averaging, and can also express the certainty of the interpolation values. A color scale is used to display the different values, and opacity is applied to indicate the certainty of the values.<br><br><br></div></p>
    <div id="map" style="width: 600px; height: 400px; background: grey"></div>
    <script type="text/javascript" src='js/app.js'></script>
  </body>
</html>
